/**
 * useRef
 *    概念：创建一个 Ref 对象
 *
 *    语法：
 *      const ref = useRef(initialValue)
 *        1. initialValue - 初始值
 *        2. ref - 返回值，返回值是个 对象，对象中有个 current 。current 的内容为 initialValue
 *                        如果将该 ref 标记到元素上，组件挂载完成之后，ref 对象中的 current 就会变化成当前标记元素的DOM对象或组件实例对象
 *
 *    比较特殊的使用场景：
 *      1. 有时我们期望组件更新之后，仍然可以获取到某个不变的值，需要使用 ref
 *        比如要玩 Swiper
 */

import { useState, useEffect, useContext, createContext, useRef } from "react";

// 引入 Swiper 核心
import Swiper from "swiper";
// 引入 Swiper 样式
import "swiper/css";

function MySwiper() {
  const [num, setNum] = useState(1);
  let mySwiper = useRef();

  console.log("MySwiper render");

  useEffect(() => {
    // 初始化 Swiper 操作
    mySwiper.current = new Swiper(".swiper");
    console.log("mySwiper", mySwiper);
    // mySwiper.slideNext();
  }, []);

  function onPrev() {
    // 调用 swiper 实例对象的 slidePrev()
    mySwiper.current.slidePrev();
  }

  function onNext() {
    // 调用 swiper 实例对象的 slideNext()
    mySwiper.current.slideNext();
  }

  return (
    <div>
      <h4>MySwiper</h4>
      {/* 该num按钮点击，触发组件重新更新之后，下面的上一页于下一页就会出毛病 */}
      <button onClick={() => setNum((num) => num + 1)}>{num}</button>
      <button onClick={onPrev}>Prev</button>
      <button onClick={onNext}>Next</button>
      <div className="swiper">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Slide 1</div>
          <div className="swiper-slide">Slide 2</div>
          <div className="swiper-slide">Slide 3</div>
        </div>
      </div>
    </div>
  );
}

function Hello() {
  const myRef = useRef("1000");
  console.log("Hello ref", myRef);

  useEffect(() => {
    // 组件挂载完成触发。
    console.log("Hello ref 挂载完成", myRef);
  }, []);

  return (
    <div>
      <h4 ref={myRef}>Hello</h4>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>App</h1>

      <hr />
      <Hello />
      <hr />
      <MySwiper />
    </div>
  );
}

export default App;
